<template>
  <div class="schedlule">
    <div class="schedlule-title">
      <div class="schedlule-title-color">
        <div v-for="(item, index) in colorList" :key="index" class="color-chunk">
          <div class="circle" :style="{ background: item.color }"></div>
          <div>{{ item.hint }}</div>
        </div>
      </div>
      <div class="schedlule-title-btn">
        <el-button type="danger" @click="urgeManage">催促办理</el-button>
      </div>
    </div>
    <div class="schedlule-map">
      <div class="map-item">
        <p>1、预算清单建立</p>
      </div>
      <div
        class="map-item"
        :style="{ background: schedule.BASIC_DATA_ISSUE ? (schedule.BASIC_DATA_ISSUE == 'N' ? '#F59A23' : '#0079FE') : '#AAAAAA' }"
      >
        <p>2、预算清单基础数据发布</p>
        <div class="arrows">
          <div><div class="line"></div></div>
        </div>
      </div>
      <div class="box-list">
        <div
          v-for="(item, index) in threeList"
          :key="index"
          class="map-item box"
          :style="{ background: item.value ? (item.value == 'N' ? '#F59A23' : '#0079FE') : '#AAAAAA' }"
        >
          <p>3.{{ index + 1 }}、{{ item.hint }}</p>
        </div>
        <div class="arrows three">
          <div><div class="line"></div></div>
        </div>
      </div>
      <div class="map-item" :style="{ background: openHint ? '#0079FE' : '#F59A23' }">
        <p>4、预算报价清单</p>
        <div class="arrows">
          <div><div class="line"></div></div>
        </div>
      </div>
    </div>
    <div class="schedlule-record">
      <div class="schedlule-record-title">耗时记录：</div>
      <div class="record-box">
        <div v-for="(item, index) in tagList" :key="index">
          <div class="title">
            <p>{{ item.title }}</p>
            <div v-if="item.particulars && item.particulars.length > 0">
              <div v-for="(i, k) in item.particulars" :key="k">
                <div class="description">
                  <p>创建人员：{{ i.USER_NAME }}</p>
                  <p>
                    <span>开始时间：{{ i.START_TIME }}</span>
                    <span>结束时间：{{ i.END_TIME }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div v-else class="description">
              <p>未开始</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import requestMethod from '../common/requestMethod'
  import publicFn from '../common/requestCommon'
  export default {
    name: 'SchedluleDialog',
    props: {
      singleEndId: {
        type: String,
        default: '',
      },
    },
    emits: ['queryCallback'],
    data() {
      return {
        tagList: [
          { key: 'BASIC_DATA_ISSUE', title: '预算清单基础数据发布', particulars: [] },
          { key: 'CONVEYOR_ISSUE', title: '输送带/皮带报价', particulars: [] },
          { key: 'ECU_ISSUE', title: '单机电控报价', particulars: [] },
          { key: 'INSTALLA_ISSUE', title: '安装调试报价', particulars: [] },
          { key: 'MOTOR_ISSUE', title: '电机报价', particulars: [] },
          { key: 'STEEL_GRILLE_ISSUE', title: '钢结构报价', particulars: [] },
          { key: 'DRIVE_SEGMENT_ISSUE', title: '驱动段选择', particulars: [] },
          { key: 'OTHER_ISSUE', title: '其他费用', particulars: [] },
          { key: 'OUT_SOURCE_ISSUE', title: '外购费用', particulars: [] },
        ],
        basics: {
          createdName: '张三',
          createdTime: '2022-1-5 11:20:30',
          releaseName: '张三',
          releaseTime: '2022-1-5 11:20:30',
        },
        colorList: [
          { color: '#0079FE', hint: '已完成' },
          { color: '#F59A23', hint: '进行中' },
          { color: '#AAAAAA', hint: '未完成' },
        ],
        threeList: [
          { hint: '输送带/皮带报价', key: 'CONVEYOR_ISSUE' },
          { hint: '钢结构报价', key: 'STEEL_GRILLE_ISSUE' },
          { hint: '单机电控报价', key: 'ECU_ISSUE' },
          { hint: '电机报价', key: 'MOTOR_ISSUE' },
          { hint: '安装调试报价', key: 'INSTALLA_ISSUE' },
          { hint: '驱动段选择', key: 'DRIVE_SEGMENT_ISSUE' },
          { hint: '其他费用', key: 'OTHER_ISSUE' },
          { hint: '外购费用', key: 'OUT_SOURCE_ISSUE' },
        ],
        schedule: {},
        openHint: false,
      }
    },
    created() {
      this.getProgress()
      this.getBudget()
    },
    methods: {
      async urgeManage() {
        let res = await publicFn(requestMethod.URGE_MANAGE)
        if (res.code === '00000') {
          this.$message({
            type: 'success',
            message: '催促成功',
          })
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      async getProgress() {
        let res = await publicFn(requestMethod.PROGRESS_QUERY, { DOCNO: this.singleEndId, '#LIMIT#': 1, '#PAGE_SIZE#': 99999 })
        if (res.code === '00000') {
          let resData = res.data[requestMethod.PROGRESS_QUERY].data
          this.tagList.forEach((item) => {
            resData.forEach((row) => {
              if (item.key == row.ACTION) {
                item.particulars.push(row)
              }
            })
          })
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      //查询单头
      async getBudget() {
        let res = await publicFn(requestMethod.BUDGET_HEADER, { DOCNO: this.singleEndId, '#LIMIT#': 1, '#PAGE_SIZE#': 99999 })
        if (res.code === '00000') {
          this.schedule = res.data[requestMethod.BUDGET_HEADER].data[0]
          this.$emit('queryCallback', this.schedule.ADDTIME)
          let reminder = ''
          this.threeList.forEach((row) => {
            row.value = this.schedule[row.key]
            if (this.schedule[row.key] == 'N') {
              reminder = row.key
            }
          })
          if (!reminder && this.schedule.BASIC_DATA_ISSUE == 'Y') {
            this.openHint = true
          }
          console.log(this.threeList)
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .schedlule {
    padding: 0 10px;
    box-sizing: border-box;
    .schedlule-title {
      display: flex;
      justify-content: space-between;
      .schedlule-title-color {
        display: flex;
        .color-chunk {
          display: flex;
          align-items: center;
          font-size: 13px;
          .circle {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-left: 5px;
          }
        }
      }
    }
    .schedlule-map {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 460px;
      .box {
        margin-top: 10px;
      }
      .box-list {
        border: 1px solid #9f9f9f;
        padding: 5px 15px 15px 15px;
        box-sizing: border-box;
        position: relative;
      }
      .arrows {
        position: absolute;
        width: 0;
        height: 0;
        top: 12px;
        left: -21px;
        border-top: 10px solid transparent;
        border-left: 15px solid #7f7f7f;
        border-bottom: 10px solid transparent;
        & > div {
          position: relative;
          .line {
            position: absolute;
            top: -1px;
            left: -95px;
            width: 80px;
            height: 4px;
            background: #7f7f7f;
          }
        }
      }
      .three {
        top: 236px;
      }
      .map-item {
        width: 150px;
        height: 50px;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        background: #0079fe;
        margin-left: 5px;
        font-size: 12px;
        border-radius: 10px;
        color: #fff;
      }
    }
    .schedlule-record-title {
      color: #d9001b;
      font-size: 18px;
    }
    .description {
      color: #c5c5c5;
      font-size: 14px;
      & > div {
        display: flex;
        margin: 0 0 0 10px;
      }
    }
    .record-box {
      height: 300px;
      overflow-y: auto;
      margin-top: 15px;
      & p {
        margin-top: 5px;
      }
    }
    .title {
      color: #000;
      font-size: 16px;
    }
  }
</style>
